<template>
  <div>
    <div style="position: relative;">
      <div class="clearfix" style="margin: 20px;">
        <div style="float: left; height: 28px; line-height: 28px;">

          <span style="color: #ff5aa8;">标题：{{ title }}</span>
          <span style="margin-left: 35px;color: #409EFF;">部门：{{ deptName }}</span>
          <span style="margin-left: 35px; color: #67C23A;">薪资月份：{{ salaryDate.split("-")[0] + "-"+ (salaryDate.split("-")[1]?salaryDate.split("-")[1]:" ") }}</span>
          <span style="margin-left: 20px; color: #222;">发放人数：{{ pnum }}</span>
        </div>

        <div style="float: right;">
          <el-button
            type="success"
            size="mini"
            @click="goBack"
          >返回
          </el-button>

          <el-button
            v-if="type=='3'"
            type="primary"
            size="mini"
            @click="handleApprove(1)"
          >审批通过
          </el-button>

          <el-button
            v-if="type=='3'"
            type="danger"
            size="mini"

            @click="handleApprove(2)"
          >审批拒绝
          </el-button>
        </div>
      </div>
    </div>
    <template>
      <el-table
        v-loading="listLoading"
        class="list-table"
        :data="listData"
        stripe
        size="small"
        fit
        highlight-current-row
        max-height="550"
        show-summary
        :summary-method="handleSummaries"
        :default-expand-all="isExpand"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%;"
      >
        <el-table-column fixed="left" :show-overflow-tooltip="true" prop="employeeName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">姓名</p>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" width="250" prop="companyName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">公司</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" width="160" prop="certNo">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">身份证号</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.certNo }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" width="100" prop="forum">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">板块</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.plateBlockName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('deptName')"
          :show-overflow-tooltip="true"
          prop="deptName"
          width="150"
          label="部门名称"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">部门名称</p>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('salary')"
          :show-overflow-tooltip="true"
          prop="salary"
          label="基本工资"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">基本工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.salary"
                class="edit-input"
                size="small"
                :disabled="true"
                :placeholder="`${scope.row.salary}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'salary')"
              />
            </template>
            <span v-else>{{ scope.row.salary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('postSalary')"
          :show-overflow-tooltip="true"
          prop="postSalary"
          label="岗位工资(元)"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.postSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                :placeholder="0"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'postSalary')"
              />
            </template>
            <span v-else>{{ scope.row.postSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('status')" :show-overflow-tooltip="true" prop="status" label="员工状态">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">在职状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.employeeStatus | employeeStatus" size="small">{{ scope.row.employeeStatus |
              employeeStatus('text') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="columnsVisible('postName')" :show-overflow-tooltip="true" prop="postName" label="岗位/职务">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">岗位/职务</p>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('onboardingDate')"
          :show-overflow-tooltip="true"
          prop="onboardingDate"
          label="入职日期"
          width="100"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">入职日期</p>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.onboardingDate | formatDate('yyyy-MM-dd') | formatDefaultDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('leaveDate')"
          :show-overflow-tooltip="true"
          prop="leaveDate"
          label="离职日期"
          width="100"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">离职日期</p>
          </template>
          <template slot-scope="scope">
            <span>
              {{ scope.row.leaveDate | formatDate('yyyy-MM-dd') | formatDefaultDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('schuqinDays')"
          :show-overflow-tooltip="true"
          prop="schuqinDays"
          label="实际出勤天数"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">实际出勤天数</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.schuqinDays"
                class="edit-input"
                :placeholder="0"
                @blur="handleChangeInputValue(scope, 'schuqinDays')"
              />
            </template>
            <span v-else>{{ scope.row.schuqinDays }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('paidDays')"
          :show-overflow-tooltip="true"
          prop="paidDays"
          label="计薪天数"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">计薪天数</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.paidDays"
                class="edit-input"
                :placeholder="0"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'paidDays')"
              />
            </template>
            <span v-else>{{ scope.row.paidDays }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('baseSalary')"
          :show-overflow-tooltip="true"
          prop="baseSalary"
          label="实发基本工资"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">实发基本工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.baseSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'baseSalary')"
              />
            </template>
            <span v-else>{{ scope.row.baseSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('sickPay')"
          :show-overflow-tooltip="true"
          prop="sickPay"
          label="病假工资(元)"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">病假工资(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.sickPay"
                class="edit-input"
                size="small"
                :placeholder="0"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'sickPay')"
              />
            </template>
            <span v-else>{{ scope.row.sickPay }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('stateSubsidies')"
          :show-overflow-tooltip="true"
          prop="stateSubsidies"
          label="项目补贴"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">项目补贴(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.stateSubsidies"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.stateSubsidies}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'stateSubsidies')"
              />
            </template>
            <span v-else>{{ scope.row.stateSubsidies }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('assessmentSalary')"
          :show-overflow-tooltip="true"
          prop="assessmentSalary"
          label="绩效"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">绩效(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.assessmentSalary"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.salaryAssessment}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'assessmentSalary')"
              />
            </template>
            <span v-else>{{ scope.row.assessmentSalary }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="columnsVisible('bonus')"
          :show-overflow-tooltip="true"
          prop="bonus"
          label="奖金"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">奖金(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.bonus"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.bonus}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'bonus')"
              />
            </template>
            <span v-else>{{ scope.row.bonus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('dollars')"
          :show-overflow-tooltip="true"
          prop="dollars"
          label="课酬"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">课酬(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.dollars"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.dollars}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'dollars')"
              />
            </template>
            <span v-else>{{ scope.row.dollars }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('salesCommissions')"
          :show-overflow-tooltip="true"
          prop="salesCommissions"
          label="销售提成"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">销售提成(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.salesCommissions"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.salesCommissions}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'salesCommissions')"
              />
            </template>
            <span v-else>{{ scope.row.salesCommissions }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('fillMoney')"
          :show-overflow-tooltip="true"
          prop="fillMoney"
          label="补款"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补款(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.fillMoney"
                class="edit-input"
                size="small"
                :placeholder="`${scope.row.fillMoney}`"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'fillMoney')"
              />
            </template>
            <span v-else>{{ scope.row.fillMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('attendanceDeduction')"
          :show-overflow-tooltip="true"
          prop="attendanceDeduction"
          label="迟到"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">迟到(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.attendanceDeduction"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'attendanceDeduction')"
              />
            </template>
            <span v-else>{{ scope.row.attendanceDeduction }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('otherDeduction')"
          :show-overflow-tooltip="true"
          prop="otherDeduction"
          label="其他扣款"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他扣款(税前)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.otherDeduction"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'otherDeduction')"
              />
            </template>
            <span v-else>{{ scope.row.otherDeduction }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="payableSalary" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">应发工资(总)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.payableSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'payableSalary')"
              />
            </template>
            <span v-else>{{ scope.row.payableSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="payableSalaryA" width="150">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">应发工资(A)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.payableSalaryA"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'payableSalaryA')"
              />
            </template>
            <span v-else>{{ scope.row.payableSalaryA }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('socialSecurity')"
          :show-overflow-tooltip="true"
          prop="socialSecurity"
          label="社保"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">社保(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.socialSecurity"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'socialSecurity')"
              />
            </template>
            <span v-else>{{ scope.row.socialSecurity }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('personalSocialSecurityAdjust')"
          :show-overflow-tooltip="true"
          prop="personalSocialSecurityAdjust"
          label="个人社保扣除总调整"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人社保扣除总调整(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalSocialSecurityAdjust"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalSocialSecurityAdjust')"
              />
            </template>
            <span v-else>{{ scope.row.personalSocialSecurityAdjust }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="columnsVisible('providentFund')"
          :show-overflow-tooltip="true"
          prop="providentFund"
          label="公积金"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">公积金(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.providentFund"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'providentFund')"
              />
            </template>
            <span v-else>{{ scope.row.providentFund }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('providentFundAdjust')"
          :show-overflow-tooltip="true"
          prop="providentFundAdjust"
          label="个人公积金扣除调整"
          width="170"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人公积金扣除调整</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.providentFundAdjust"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'providentFundAdjust')"
              />
            </template>
            <span v-else>{{ scope.row.providentFundAdjust }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('beforeTaxSalary')"
          :show-overflow-tooltip="true"
          prop="beforeTaxSalary"
          label="缴税工资"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">缴税工资(总）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.beforeTaxSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'beforeTaxSalary')"
              />
            </template>
            <span v-else>{{ scope.row.beforeTaxSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('beforeTaxSalaryA')"
          :show-overflow-tooltip="true"
          prop="beforeTaxSalaryA"
          label="缴税工资(A）"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">缴税工资(A）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.beforeTaxSalaryA"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'beforeTaxSalaryA')"
              />
            </template>
            <span v-else>{{ scope.row.beforeTaxSalaryA }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('personalIncomeTax')"
          :show-overflow-tooltip="true"
          prop="personalIncomeTax"
          label="个人所得税（总）"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人所得税（总）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalIncomeTax"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalIncomeTax')"
              />
            </template>
            <span v-else>{{ scope.row.personalIncomeTax }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('personalIncomeTaxA')"
          :show-overflow-tooltip="true"
          prop="personalIncomeTaxA"
          label="个人所得税（A）"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">个人所得税（A）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.personalIncomeTaxA"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'personalIncomeTaxA')"
              />
            </template>
            <span v-else>{{ scope.row.personalIncomeTaxA }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('compensation')"
          :show-overflow-tooltip="true"
          prop="compensation"
          label="补偿金/其他"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">补偿金/其他(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.compensation"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'compensation')"
              />
            </template>
            <span v-else>{{ scope.row.compensation }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="columnsVisible('hoOther')"
          :show-overflow-tooltip="true"
          prop="hoOther"
          label="其他扣款(税后)"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">其他扣款(税后)(元)</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.hoOther"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'hoOther')"
              />
            </template>
            <span v-else>{{ scope.row.hoOther }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('realSalary')"
          :show-overflow-tooltip="true"
          prop="realSalary"
          label="本次实发金额(总）"
          width="150"
          fixed="right"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">本次实发金额(总）</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.realSalary"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'realSalary')"
              />
            </template>
            <span v-else>{{ scope.row.realSalary }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('realSalaryA')"
          :show-overflow-tooltip="true"
          prop="realSalaryA"
          label="A发放金额"
          width="150"
          fixed="right"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">A发放金额</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.realSalaryA"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'realSalaryA')"
              />
            </template>
            <span v-else>{{ scope.row.realSalaryA }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('realSalaryB')"
          :show-overflow-tooltip="true"
          prop="realSalaryB"
          label="B发放金额"
          width="150"
          fixed="right"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">B发放金额</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.realSalaryB"
                class="edit-input"
                size="small"
                :disabled="true"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'realSalaryB')"
              />
            </template>
            <span v-else>{{ scope.row.realSalaryB }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columnsVisible('remark')"
          :show-overflow-tooltip="true"
          prop="remark"
          label="备注"
          width="150"
        >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">备注</p>
          </template>
          <template slot-scope="scope">
            <template v-if="type !== '3'">
              <el-input
                v-model="scope.row.remark"
                class="edit-input"
                size="small"
                style="width: 130px;"
                @blur="handleChangeInputValue(scope, 'remark')"
              />
            </template>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="type != 3"
          ref="actionColumn"
          fixed="right"
          align="left"
          label="操作"
          :width="actionWidth"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['hr:salaryMonth:make:add']"

              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            />
            <slot name="rights" :row-data="scope.row" />
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="请输入拒绝原因" :visible.sync="openReasonInput" width="650px">

      <el-row :gutter="20">

        <el-col :span="16" :offset="2">

          <el-input
            v-model="remark"
            type="textarea"
            :rows="7"
            placeholder="请输入审核意见"
            clearable
            size="small"
            style="margin-bottom: 20px;"
          />

        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleEditRejectSubmit2">确认审批拒绝</el-button>
        <el-button @click="openReasonInput = false">取消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import { debounce } from 'lodash'
import { mapGetters } from 'vuex'
import { createSalarymakeAPI, updateSalarymakeAPI, submitApproveAPI } from '@/api/todo/salarymake'
import commonMixins from '@/mixins/common'
import salaryMixins from '@/mixins/salary'
import filters from '@/filters/filters'
import tagFilter from '@/filters/tagFilter'
import { getEmployeeListCreateAPI, getEmployeeListUpdateAPI } from '@/api/todo/salarymake'
import request from '@/utils/request'

export default {
  name: 'SalarymakeTable',
  components: {},
  mixins: [commonMixins, salaryMixins, filters, tagFilter],
  props: {},
  data() {
    return {
      	title: '',
      deptName: '',
      salaryDate: '',
      type: '3', // 代表只是查看
      listLoading: '',
      searchKey: {},
      isExpand: true,
      listData: [], // 列表数据
      openReasonInput: false,
      remark: ''
    }
  },
  computed: {},
  methods: {
    goBack() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({
        name: 'Task'
      })
    },
    handleReelect() { // 重选选择
      this.$emit('on-reelect')
    },
    formatParams() { // 格式化参数
      const { id, type } = this
      const { deptId, salaryDate } = this.searchKey
      const params = {
        salaryMonth: salaryDate,
        deptId: deptId,
        hrSalaryMonths: []
      }
      this.listData.forEach((item, index) => {
        params.hrSalaryMonths[index] = {
          ...item,
          ...{
            salaryDate: salaryDate,
            deptId: deptId
          }
        }
      })
      if (type !== '1') { // 修改、查看
        params.id = id
      }
      // console.log(params)
      // console.log(JSON.stringify(params))
      return params
    },
    handleEditSubmit: debounce(function() { // 保存，防抖
      const params = this.formatParams()
      this.saveData(params)
    }, 300),
    handleChangeInputValue(data) {
      const { row } = data
      Object.keys(row).forEach((item, index) => {
        this.$set(this.listData[data.$index], item, row[item])
      })
    },

    // yyf
    handleApprove(option) { // 审批
      const msg = option == 1 ? ' <b><font color=green>通过</font></b> ' : ' <b><font color=red>拒绝</font></b> '

      this.$confirm('审批操作不可撤销,请认真审核,您确定要' + msg + '吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        /* let params = this.formatParams()
          this.submitApproveData(params)*/

        if (option == 1) {
          // 审批通过就直接提交

          const auditOpinion = prompt('请输入审批意见！')

          request({
            url: '/hr/salaryMonth/make/audit',
            method: 'post',
            data: {
              taskId: this.taskId,
              auditOpinion: auditOpinion || '同意',
              auditResult: 1
            }
          }).then(response => {
            if (response.code != '200') {
              this.msgError('审批失败，原因是' + response.data.msg)
              return
            }

            if (response.data.receiveDeptName) {
              this.msgSuccess(response.data.msg + '，下一步办理人【' + response.data.receiveDeptName + '】【' + response.data.receiverName + '】')
            } else {
              this.msgSuccess(response.data.msg)
            }
            // this.msgSuccess(response.data.msg+'，下一步办理人【'+response.data.receiveDeptName+'】【'+response.data.receiverName+'】');
            const that = this
            setTimeout(() => {
              that.goBack()
            }, 2000)
          })
        } else {
          // 审批拒绝需要填写拒绝原因
          this.openReasonInput = true
        }
      })
    },

    async getList() {
      const query = this.$route.query
      const id = query.businessId
      this.taskId = query.taskId
      this.title = query.title

      const response = await getEmployeeListUpdateAPI({ id: id })

      this.pnum = response.data.pnum

      console.log('加载薪资数据', response)

      this.listData = response.data.hrSalaryMonths

      this.deptName = response.data.deptName
      this.salaryDate = response.data.salaryMonth
    },

    handleEditRejectSubmit2() {
      if (!this.remark) {
        this.msgError('请填写拒绝原因！')
        return
      }

      request({
        url: '/hr/salaryMonth/make/audit',
        method: 'post',
        data: {
          taskId: this.taskId,
          auditOpinion: this.remark,
          auditResult: 0
        }
      }).then(response => {
        if (response.code != '200') {
          this.msgError('审批失败，原因是' + response.data.msg)
          return
        }

        if (response.data.receiveDeptName) {
          this.msgSuccess(response.data.msg + '，下一步办理人【' + response.data.receiveDeptName + '】【' + response.data.receiverName + '】')
        } else {
          this.msgSuccess(response.data.msg)
        }

        const that = this
        setTimeout(() => {
          that.goBack()
        }, 2000)
      })
    }

  },
  watch: {
    /* data: {
         handler: function(newVal, oldVal) {
           if (JSON.stringify(newVal) !== JSON.stringify(this.listData)) {
             this.listData = JSON.parse(JSON.stringify(newVal))
           }
         },
         immediate: true
       },
       searchParams: {
         handler: function(newVal, oldVal) {
           if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
             this.searchKey = JSON.parse(JSON.stringify(newVal))
             console.log(this.searchKey)
           }
         },
         deep: true,
         immediate: true
       }*/
  },
  created() {
    this.getList()
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
  .list-table {
    .el-button--mini {
      padding: 7px 15px;
      width: 45px;
      color: #fff;
    }

    & /deep/ .el-table__header-wrapper {
      th {
        background-color: #fff;
      }
    }
  }
</style>
